<template>
  <el-select
    v-model="value"
    @change="changeValue"
    clearable
    placeholder="请选择"
  >
    <el-option
      label="全部"
      value=""
    >
    </el-option>
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>

<script>
import {findAll} from "../api/role";
export default {
  props: ["checked"], //自定义属性
  data() {
    return {
      options: [],
      value: this.checked
    };
  },
  // 钩子函数 渲染出来的时候，请求后台查询数据
  created() {
    let con={
      status:''
    }
    findAll(1, 999,con)
      .then(res => {
        console.log(res);
        this.options = res.data.list;
      })
      .catch();
  },
  methods: {
    changeValue() {
      this.$emit("roleValueChange", this.value);
    }
  },
  // 计算属性
  computed: {},
  //监听:有个前提条件(默认情况)，必须新旧值发生变化，才能触发！
  watch: {
    checked: {
      handler(newValue, oldValue) {
        this.value = newValue;
      },
      //这个设置 可以让第一次点击，也触发这个监听事件
      immediate: true
    }
  }
};
</script>